<template>
  <view class="w100">
    <!-- <view style="position: fixed;left: 10rpx;top: 40rpx;background-color: #deeaef;z-index: 10;border-radius: 30rpx;padding: 10rpx 30rpx ;">
      <uni-icons type="back" color="#000" size="16" style="font-weight: 600;" @click="back"></uni-icons>
    </view> -->
    <view class="w100 df-c" style="height: 100vh;position: relative;">
      <swiper class="swiper-box" @change="change" vertical :duration="200">
        <swiper-item v-for="(item ,index) in right_list" :key="index">
          <view class="swiper-item w100 h100">
            <image class=" w100 h100 bg_image" src="https://img1.baidu.com/it/u=3375211172,4107288302&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083" />

            <!-- <view class="df-c" style="height: 40%;">
              <image class="tx_image" src="https://i.ibb.co/3hTQmFt/20230529083909.jpg" />
            </view> -->
          </view>
        </swiper-item>
      </swiper>

      <view class="right_fix df fd-c jc-c ai-c">
        <view v-for="item in right_list" :key="item.id" class="df fd-c jc-c ai-c list" @click="list_click(item)">

          <view class="df fd-c  ai-c share_box" v-if="item.name === '分享'">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text"> {{ item.name }}</text>
            <button class="share_btn" open-type="share"></button>
          </view>
          <view v-else class="df fd-c ai-c">
            <uni-icons :type="item.icon" size="30"></uni-icons>
            <text class="text"> {{ item.name }}</text>

          </view>

        </view>
      </view>

      <view class="bottom_fix">

      </view>

      <!-- 评论 -->
      <uni-popup ref="chat_popup" type="bottom">
        <view class="chat_box">
          <Chat @close_popus="close_popus"></Chat>

        </view>
      </uni-popup>

    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import Chat from "@/components/Chat.vue";
const back = () => {
  uni.navigateBack();
};
onLoad(() => {
  // setTimeout(function () {
  //   console.log("start pulldown");
  // }, 1000);
  // uni.startPullDownRefresh();
});
// onPullDownRefresh(() => {
//   console.log("refresh");
//   setTimeout(function () {
//     uni.stopPullDownRefresh();
//   }, 1000);
// });

const right_list = ref([
  {
    name: "下载",
    icon: "download",
    id: "10",
  },
  {
    name: "收藏",
    icon: "heart",
    id: "20",
  },
  {
    name: "评论",
    icon: "chat",
    id: "30",
  },
  {
    name: "分享",
    icon: "redo",
    id: "40",
  },
]);

//  图片滑动模块
const swiper_current = ref(0);
const change = (e: any) => {
  // this.current = e.detail.current;
  console.log(e);
  swiper_current.value = e.detail.current;
  let id = right_list.value[e.detail.current].id;
  console.log(id);
};

// 右侧点击事件
const list_click = (item: any) => {
  console.log(item);

  if (item.name === "下载") {
    uni.downloadFile({
      url: "https://img1.baidu.com/it/u=3375211172,4107288302&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083", //仅为示例，并非真实的资源
      success: (res) => {
        console.log(res);
        if (res.statusCode === 200) {
          // console.log("下载成功");
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log(res);
              uni.showToast({
                title: "保存成功",
                duration: 2000,
              });
              console.log("save success");
            },
          });
        }
      },
      fail: (err) => {
        console.log(err);
      },
      complete: (res) => {
        console.log(res);
      },
    });
  } else if (item.name === "评论") {
    console.log("评论");
    chat_popup.value.open("button");
  }
};

// 评论 ------------------------------------------------评论模块
const chat_popup = ref<any>(null);
// 关闭评论
const close_popus = () => {
  chat_popup.value.close();
};

// let timer:any = null
// const awiper_transition = (e:any) => {
//   console.log(e);

//   if (swiper_current.value === 0 && e.detail.dy < 0) {
//     timer =   setTimeout(() => {
//       console.log(111);

//     }, 2000);
//   }
// };
</script>

<style scoped lang="scss">
.chat_box {
  background-color: #fff;
  width: 100%;
  height: 700rpx;
  font-size: 28rpx;
}

.bg_image {
  margin: auto 0;
  max-width: 100%;
}
.tx_image {
  width: 360rpx;
  height: 360rpx;
}

.right_fix {
  position: fixed;
  right: 20rpx;
  top: 50%;
  border: 2rpx solid #676a77;
  padding: 6rpx;
  transform: translateY(-50%);
  border-radius: 12rpx;

  .text {
    font-size: 32rpx;
  }

  .list {
    padding: 10rpx 0;
  }
}

.swiper-box {
  width: 100%;
  height: 100%;
}

.share_box {
  position: relative;
}

.share_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  border: transparent;

  &::after {
    border: transparent;
  }
}
</style>
